<script setup>
import { User_Tags } from "@/api";
import { h, ref, reactive, onMounted } from "vue";

// 获取标签分类
let labelData = ref([])
let label_all = async () => {
    let { status, msg, data } = await User_Tags.label_cate();
    if (status === 200) {
        labelData.value = data;
    }
}

// 用户标签列表
let tableData = ref([])
let tags_list = async () => {
    let { status, msg, data } = await User_Tags.user_tags_list({ page: 1, limit: 10, label_cate: '' });
    if (status === 200) {
        tableData.value = data.list;
        total.value = data.count;
    }
}

// 分页
let total = ref(0)
let currentPage = ref(1)
let pageSize = ref(10)
let handleCurrentChange = async (page) => {
    let { status, msg, data } = await User_Tags.user_tags_list({ page, limit: 10, label_cate: label_cate.value });
    if (status) {
        tableData.value = data.list;
    }
}

// 标签切换
let activeName = ref('')
let label_cate = ref('')
let handleTabsChange = async (tab) => {
    label_cate.value = JSON.parse(JSON.stringify(tab.props.name));
    let { status, msg, data } = await User_Tags.user_tags_list({ page: 1, limit: 10, label_cate: label_cate.value });
    if (status === 200) {
        tableData.value = data.list;
        total.value = data.count;
    }
}

// 添加标签
let add_tags_visible = ref(false)
let addForm = reactive({
    label_cate: '',
    label_name: '',
})
let options = ref([])
let handleAddTags = async () => {
    let { status, msg, data } = await User_Tags.set_user_label(0);
    if (status === 200) {
        options.value = data.rules[0].options;
        add_tags_visible.value = true;
    }
}
let handleAddSubmit = async () => {
    let { status, msg, data } = await User_Tags.set_user_tags(addForm);
    if (status === 200) {
        add_tags_visible.value = false;
        ElMessage.success(msg);
    } else {
        ElMessage.error(msg);
    }
}

// 添加分类
let add_cate_visible = ref(false)
let cateForm = reactive({
    name: '',
    sort: 0,
})
let rules = reactive({
    name: [
        { required: true, message: '请输入分类名称！', trigger: 'blur' }
    ],
})
let form_ref = ref(null)
let handleCateSub = () => {
    form_ref.value.validate(async (valid) => {
        if (valid) {
            let { status, msg } = await User_Tags.save_label_cate(cateForm);
            if (status === 200) {
                // 操作DOM
                add_cate_visible.value = false;
                ElMessage.success(msg);
            } else {
                ElMessage.error(msg);
            }
        }
    })
}

// 分隔符
let spacer = h(ElDivider, { direction: 'vertical' })


onMounted(() => {
    label_all();
    tags_list();
})
</script>

<template>
    <el-card class="box-card" shadow="never">
        <el-tabs v-model="activeName" tab-position="left" class="demo-tabs" @tab-click="handleTabsChange">
            <el-tab-pane label="全部" name=""></el-tab-pane>
            <el-tab-pane v-for="label in labelData" :key="label.id" :label="label.name" :name="label.id"></el-tab-pane>
            <div class="tab-btn">
                <el-button type="primary" icon="Plus" @click="handleAddTags">添加标签</el-button>
                <el-button type="success" icon="Plus" @click="add_cate_visible = true">添加分类</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%"
                :header-cell-style="{ background: '#f4f3f9', color: '#606266' }">
                <el-table-column prop="id" label="ID" />
                <el-table-column prop="label_name" label="标签名称" />
                <el-table-column prop="cate_name" label="分类名称" />
                <el-table-column fixed="right" label="操作">
                    <template #default>
                        <el-space :size="10" :spacer="spacer">
                            <el-button link type="primary" size="small">修改</el-button>
                            <el-button link type="primary" size="small">删除</el-button>
                        </el-space>
                    </template>
                </el-table-column>
            </el-table>
        </el-tabs>
        <div class="card-bottom">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" background="background"
                layout="total, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
        </div>

        <!-- 添加标签 -->
        <el-dialog v-model="add_tags_visible" title="添加标签">
            <el-form :model="addForm" label-width="120px">
                <el-form-item label="标签分类">
                    <el-select v-model="addForm.label_cate" class="m-2 add-tags" placeholder="请选择标签分类">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="标签名称">
                    <el-input v-model="addForm.label_name" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" class="add-btn" @click="handleAddSubmit">提交</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 添加分类 -->
        <el-dialog v-model="add_cate_visible" title="添加标签分类">
            <el-form :model="cateForm" label-width="120px" ref="form_ref" :rules="rules">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="cateForm.name" />
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="cateForm.sort" class="mx-4" controls-position="right" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" class="cate-btn" @click="handleCateSub">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<style lang="less" scope>
.box-card {
    .demo-tabs {
        .tab-btn {
            margin-left: 15px;
            margin-bottom: 20px;
        }
    }

    .card-bottom {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }
}

.add-tags {
    width: 100%;
}

.add-btn {
    width: 100%;
}

.cate-btn {
    width: 100%;
}
</style>